<template>
    <el-header>
      <!-- 图标的展示 -->
      <el-button size="small" @click="HandleCollapse">
        <el-icon :size="20">
          <Menu />
        </el-icon>
      </el-button>
      <el-breadcrumb  style="margin-left: 30px;" >
        <el-breadcrumb-item :to="{ path: '/user' }" >首页</el-breadcrumb-item>
        <el-breadcrumb-item :to="{path:this.$route.path}">{{ this.$route.meta.name }}</el-breadcrumb-item>
      </el-breadcrumb>
      <div style="flex: 1;width: 0;display: flex;align-items: center;justify-content: flex-end;">
        <el-dropdown placement="bottom">
          <img :src="user.avatar" style="width: 50px;height: auto; border-radius: 50%;" alt="">
          <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="this.$router.push('/info')">个人信息</el-dropdown-item>
            <el-dropdown-item @click="this.$router.push('/password')" >修改密码</el-dropdown-item>
            <el-dropdown-item @click="layout()" >退出登录</el-dropdown-item>
          </el-dropdown-menu>
        </template>
        </el-dropdown>
      </div>
    </el-header>
  </template>
  
  <script>
  export default {
    data() {
      return{
        user: this.$store.state.user
      }
    },
    components:{
    },
    methods: {
      HandleCollapse() {
        this.$store.commit("updateIsCollapse");
      },
      layout(){
        //跳转到登录界面
        this.$router.push('/');
      },
      navGo(url){
            this.$router.push(url);
        }
    },
  };
  </script>
  
  <style>
  .el-header {
    display: flex;
    align-items: center;
    width: 100%;
    background: #f0f0f0;
    box-shadow: 2px 0 6px rgba(0, 21, 41, 0.35);
  }
  .el-breadcrumb .el-breadcrumb__inner {
          color:black;
  
  }
  
  
  </style>